<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屏幕截图工具</title>
    <style>
        body { margin: 0; overflow: hidden; }
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            cursor: crosshair;
        }
        #startBtn {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 100;
            padding: 8px 16px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #toolbar {
            position: absolute;
            display: none;
            background: rgba(0,0,0,0.75);
            padding: 4px 8px;
            border-radius: 4px;
            gap: 6px;
            z-index: 200;
        }
        #toolbar button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
        }
        #toolbar button.cancel {
            background: #f44336;
        }
    </style>
</head>
<body>
    <button id="startBtn">开始截图</button>
    <canvas id="canvas"></canvas>
    <div id="toolbar">
        <button id="saveBtn">保存</button>
        <button id="cancelBtn" class="cancel">取消</button>
    </div>
    <script src="ScreenSnipper.js"></script>
    <script>
        function onCapture(url) {
            console.log('截图数据', url)
        }
        const snip = new ScreenSnipper({
            snapDistance: 8, // 吸附范围 8 像素
            onCapture
        });
        document.getElementById("startBtn").onclick = () => snip.start();
    </script>
</body>
</html>
